<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full">
    <!-- 顶部 Banner -->
    <section class="w-full pb-[32%] lg:pb-[21%] relative">
      <img
        src="../assets/images/course-banner.png"
        alt=""
        class="w-full h-full object-cover absolute top-0 left-0"
      />
    </section>
    <!-- 课程内容 -->
    <section class="w-full bg-[#f9fbfe]">
      <div class="w-full max-w-300 mx-auto">
        <!-- 课程分类顶部导航 -->
        <ul class="flex">
          <li
            class="text-xs md:text-sm lg:text-base flex-1 py-3 md:py-5 lg:py-7 text-center border-b-solid border-b-transparent border-b-[1px] cursor-pointer"
            :class="{ active: activeCourse.id == item.id }"
            @click="activeCourse = item"
            v-for="item in courseList"
            :key="'course_' + item.id"
          >
            {{ item.title }}
          </li>
        </ul>
        <div class="py-5 lg:py-10">
          <!-- 移动端隐藏 课程名称 -->
          <div class="hidden md:block">
            <p class="text-5xl flex flex-col text-[#EFF2F7] font-MiSans-Heavy font-800">
              <span style="font-family: 'MiSans-Heavy'"> LAND SURVEY</span>
            </p>
            <p
              class="text-3xl transform -translate-y-5 mb-[-28px]"
              style="font-family: 'MiSans-Demibold'"
            >
              {{ activeCourse.title }}
            </p>
          </div>
          <!-- 课程信息 -->
          <div
            class="flex flex-col md:flex-row gap-5 md:gap-10 md:mt-10"
            v-if="activeCourse.course.length > 0"
          >
            <!-- 课程属性 -->
            <ul class="flex flex-row justify-center md:justify-start md:flex-col gap-2 lg:gap-5">
              <li
                class="p-2 lg:p-5 lg:px-7 flex gap-5 rounded-md cursor-pointer"
                :class="activeAttr?.id == attr.id ? 'bg-white' : 'bg-[rgba(255,255,255,0.6)]'"
                @click="activeAttr = attr"
                v-for="(attr, index) in activeCourse.course"
                :key="attr.title + index"
              >
                <img :src="attr?.cover_img" class="size-[50px] hidden md:block" alt="" />
                <p class="flex flex-col justify-center">
                  <span
                    class="text-base lg:text-xl text-[#262223]"
                    :class="{ active: activeAttr?.id == attr.id }"
                    style="font-family: 'MiSans-Demibold'"
                  >
                    {{ attr.title }}
                  </span>
                  <span class="text-[#7B7D85] hidden md:block"> {{ attr.ps }} </span>
                </p>
              </li>
              <!-- <li
                class="p-2 lg:p-5 lg:px-7 flex gap-5 bg-[rgba(255,255,255,0.6)] rounded-md cursor-pointer"
              >
                <img
                  src="../assets/images/course-i2.png"
                  class="size-[50px] hidden md:block"
                  alt=""
                />
                <p class="flex flex-col justify-center">
                  <span
                    class="text-base lg:text-xl text-[#262223]"
                    style="font-family: 'MiSans-Demibold'"
                  >
                    預期學習成果
                  </span>
                  <span class="text-[#7B7D85] hidden md:block"> 預計您學成後的學習成果 </span>
                </p>
              </li>
              <li
                class="p-2 lg:p-5 lg:px-7 flex gap-5 bg-[rgba(255,255,255,0.6)] rounded-md cursor-pointer"
              >
                <img
                  src="../assets/images/course-i3.png"
                  class="size-[50px] hidden md:block"
                  alt=""
                />
                <p class="flex flex-col justify-center">
                  <span
                    class="text-base lg:text-xl text-[#262223]"
                    style="font-family: 'MiSans-Demibold'"
                  >
                    入學要求
                  </span>
                  <span class="text-[#7B7D85] hidden md:block"> 入學的標準要求 </span>
                </p>
              </li>
              <li
                class="p-2 lg:p-5 lg:px-7 flex gap-5 bg-[rgba(255,255,255,0.6)] rounded-md cursor-pointer"
              >
                <img
                  src="../assets/images/course-i4.png"
                  class="size-[50px] hidden md:block"
                  alt=""
                />
                <p class="flex flex-col justify-center">
                  <span
                    class="text-base lg:text-xl text-[#262223]"
                    style="font-family: 'MiSans-Demibold'"
                  >
                    課程結構
                  </span>
                  <span class="text-[#7B7D85] hidden md:block"> 我們的課程構架 </span>
                </p>
              </li> -->
            </ul>
            <!-- 课程描述 -->
            <div class="bg-white rounded-md flex-1 p-3 lg:p-7 lg:px-10 mx-3 lg:mx-0">
              <p
                class="text-base lg:text-xl"
                v-html="
                  hightLight(activeAttr?.content || '', activeAttr?.annotation || '', '#73CC6D')
                "
                style="font-family: 'MiSans-Demibold'"
              ></p>
              <ul>
                <li
                  v-for="(value, index) in activeAttr?.list"
                  :key="'desc_' + index"
                  class="py-3 lg:py-7 border-b-solid border-b-[1px] border-[#eee]"
                >
                  <p
                    class="text-base lg:text-xl font-bold bg-[#F6F9FE] rounded-[10px] w-10 h-10 flex items-center justify-center text-[#666] border-solid border-[1px] border-[#D3D8E0]"
                  >
                    {{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}
                  </p>
                  <p
                    class="mt-3 lg:mt-5 text-sm lg:text-base"
                    v-html="hightLight(value.content || '', value.annotation || '', '#73CC6D')"
                  ></p>
                </li>
              </ul>
              <p class="w-full pt-5 lg:pt-10 text-right">
                <a-button type="primary" @click="nav">立即報名</a-button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { theme } from 'ant-design-vue'
import { hightLight } from '@/utils'
import { courseConfigApi } from '@/api'
import type { CourseType, CourseItemType } from '@/api/type'
const router = useRouter()
const { token } = theme.useToken()
// 课程分类顶部导航选中项
const activeCourse = ref<CourseType>({
  id: 0,
  title: '',
  course: [],
})
// 课程属性选中项
const activeAttr = ref<CourseItemType>()
const courseList = ref<CourseType[]>()

const nav = () => {
  router.push({ name: 'signup', query: { courseId: activeCourse.value.id } })
}

const course = ref<CourseType[]>()
onMounted(() => {
  courseConfigApi().then((res) => {
    course.value = res
    courseList.value = res
    activeCourse.value = res[0] as CourseType
    activeAttr.value = activeCourse.value.course[0] as CourseItemType
    console.log(res)
  })
})
</script>
<style scoped>
.active {
  color: v-bind('token.colorPrimary');
  border-color: v-bind('token.colorPrimary');
}
</style>
